import React, { useState, useEffect } from 'react';
import { useForm, BaseDlg, NuiBt, IkRangeDate, ck_date, ck_date_range } from 'sui';

const DlgTm = ({ open, setOpen, hcmd }) => {
    const [value, setValue] = useState();
    const form = useForm(setValue);

    useEffect(() => {
        if (!open) {
            return;
        }

        setValue({
            start: new Date(),
            end: new Date(),
        });
    }, [open]);

    const hok = () => {
        const ck = {
            start: (v) => ck_date(v),
            end: (v) => ck_date_range(value["start"], v),
        };

        if (!form.hcheck(ck, value)) {
            return;
        }

        setOpen(false);
        hcmd({
            s: value["start"],
            e: value["end"],
        });
    };

    return (
        <BaseDlg open={open} title="时间段">
            <div className="flex flex-col">
                <div className="ml-4">
                    <IkRangeDate name_s="start" name_e="end" form={form} value={value}/>
                </div>
                <div className="inline-flex justify-end">
                    <NuiBt className="h-16" hcmd={() => setOpen(false)}>取消</NuiBt>
                    <NuiBt className="ml-12 mr-4 h-16" hcmd={hok}>确定</NuiBt>
                </div>
            </div>
        </BaseDlg>
    );
};

export {DlgTm};
